HTML CSS Javascript ハンバーガーメニューの作り方 コピペOK！
ハンバーガーメニュー
三本線をクリックしてみてください。三本線がバツになり、メニューが現れます。以下のようなハンバーガーメニューのコードをご紹介します。
ここをクリック！
HTML
<div class="Hbg">
<a class="MenuBtn" id="MenuBtn">
<div></div>
<div></div>
<div></div>
</a>
</div>
CSS
.Hbg{
position: relative;
height: 100px;
}
.MenuBtn {
display: block;
height: 60px;
width: 60px;
position: absolute;
top: 0;
left: 0;
padding: 0;
margin: 10px;
background-color: #34495e4d;
z-index: 5;
}
.MenuBtn div {
height: 4px;
width: 60%;
background-color:black;
position: absolute;
border-radius: 5px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: 0.3s;
}
.MenuBtn div:nth-of-type(1) {
transform: translate(-50%, -17px);
}
.MenuBtn div:nth-of-type(3) {
transform: translate(-50%, 14px);
}
.MenuBtn.active div:nth-of-type(1) {
transform: rotate(45deg) translate(-50%, 0px);
transform-origin: 0% 50%;
}
.MenuBtn.active div:nth-of-type(2) {
opacity: 0;
}
.MenuBtn.active div:nth-of-type(3) {
transform: rotate(-45deg) translate(-50%, 0px);
transform-origin: 0% 50%;
}
#nav {
padding: 20px 20px 20px 100px;
position: absolute;
background: rgb(101, 101, 255);
opacity: 0;
transform: translateX(-100%);
transition: .3s;
}
#nav ul li a{
color: white;
}
#nav.active {
opacity: 1;
position: absolute;
transform: translateX(0%);
transition: .3s; }
Javascript
<script>
document.addEventListener('DOMContentLoaded', function() {
document.getElementById("MenuBtn").addEventListener("click",
function(){
this.classList.toggle("active");
document.getElementById("nav").classList.toggle("active");
})
}); </script>
